<template>
	<view class="page">
	<block v-for="(item,index) in list" :key="index">
		<view class="list">
			<view class="list_top">
				 <view class="list_top_left">
					 <p>{{item.srname}}</p>
					 <span>{{item.room?item.room+'室':''}}{{item.hall?item.hall+'厅':''}}{{item.toilet?item.toilet+'卫':''}}/{{item.square}}m²</span>
				 </view>
				 <view class="list_top_right">
					<block v-if="item.coverUrl">
					<image :src="item.coverUrl" class="ok" mode="widthFix">
					</block>
					<block v-else>
					<image src="../../static/img/house/200.png" class="ok" mode="widthFix">
					</block>
						
					<p @click="_navigateTo('/pages/house/myEdit')">更新户型</p>
				 </view>
			</view>
			<view class="list_footer">
				<p class="list_footer_left" @click="_navigateTo('/pages/house/edit')"><i></i><span>更新信息</span><b></b></p>
				<p class="list_footer_right" @click="_del(item.id)"><i></i><span>删除</span></p>
			</view>
		</view>
		</block>
		

		
		
		<view class="list_no" v-if="list.length==null">
			暂无数据
		</view>
		
		<view class="bt_box_hr"></view>
		<view class="bt_box">
			<view class="bt" @click="_navigateTo('/pages/house/add')">添加我家</view>
		</view>
		
		<view class="del" v-if="del">
			<view class="delbj"></view>
			<view class="del_box">
				<span>确认删除“万达一期住宅”</span>
				<i>删除后，信息将被清除，且不可撤销</i>
				<p><em class="exit" @click="exit()">取消</em><em class="ok"  @click="ok()">确定</em></p>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				del:false,
				id:''
			}
		},
		onLoad(e) {
			let that = this;
			that._list()
		},
		methods: {
			//取消
			exit(){
				this.del=false
			},
			//删除
			_del(e){
				this.del=true
				this.id= e
			},
			
			//确定删除
			ok(e){
				
				let that = this
				that.api.post('mhc/add', that.id).then(res => {
					let temp = JSON.parse(res)
					if (temp) {
						uni.showToast({
							title: "删除成功",
							icon: 'none'
						})
						setTimeout(function() {
							that.del=false
							that._list()
						}, 1500)
					}
					
				})
				
				
				
			},
			
			//获取列表
			_list(){
				let that = this
				that.api.get('mhc/list').then(res => {
				
					let temp = JSON.parse(res.data)
					that.list = temp
					console.log("temp", temp);
				})
			},
			

			// 跳页
			_navigateTo(e) {
				uni.navigateTo({
					url: e
				});
			},

		}
	}
</script>

<style>
	.del{ display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;}
	.delbj{ display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; background: rgba(0,0,0,0.4);}
	.del_box{ width: 606rpx;
height: 278rpx;
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx; z-index: 999;
opacity: 1; position: fixed; top: 50%; left: 50%; margin: -136rpx 0 0 -303rpx;}
.del_box span{ width: 90%; height: auto; display: block; float: left; margin: 40rpx 5% 24rpx; font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
line-height: 44rpx; text-align: center;}
	.del_box i{ width: 90%; height: auto; display: block; float: left; margin: 0 5% 42rpx; font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #BEBEBE;
line-height: 40rpx; text-align: center;}
	.del_box p{ width: 100%; height: 88rpx; display: block; float: left; border-top: 1px solid #F6F6F6;}
	.del_box p em{ width: 50%; box-sizing: border-box; height: 88rpx; display: block; float: left; text-align: center; line-height: 88rpx; }
.del_box p em.exit{border-right:1px solid #F6F6F6;font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #BEBEBE;}

.del_box p em.ok{font-size: 28rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FE5700;}


	.list_footer{width: 100%;
height: 80rpx;
opacity: 1; display: block; position: absolute;left: 0; bottom: 0;
border-top: 1rpx solid rgba(190,190,190,0.5);}
	.list_footer p b{width: 1px;
height: 80rpx;
display: block; float: right;
border-right: 1rpx solid rgba(190,190,190,0.5);}
	.list_footer p{ width: 50%; height: 80rpx; text-align: center; font-size: 26rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FE5700; line-height: 80rpx;  display: block; float: left;}
.list_top{ width: 100%; height: auto; display: block; float: left;}
.list_footer p i{width: 28rpx; height: 28rpx; display: inline-block;

		margin: 26rpx 10rpx -5rpx 0;
		background: url(../../static/img/house/my_edit.png) no-repeat;
		background-size: 100%;}
		.list_footer p.list_footer_right i{ background: url(../../static/img/house/my_del.png) no-repeat;
		background-size: 100%;}
	
	.list_top_left{ width: 400rpx; height: auto; display: block; float: left; margin: 68rpx 0 0 32rpx; position: relative;}
	.list_top_left p{ width: 100%; height: auto; display: block; float: left;
font-size: 28rpx;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #000000;
line-height: 40rpx; margin: 0 0 4rpx 0;}

	.list_top_left span{ width: 100%; height: auto; display: block; float: left;
font-size: 22rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 32rpx; margin: 0 0 0 0;}

.list_top_right{ width: 160rpx;
height: 160rpx;
background: #F6F6F6;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1; display: block; float: right; margin: 30rpx 48rpx 0 0; position: relative; overflow: hidden;}


.list_top_right image{ width: 160rpx;
height: 160rpx; display: block; float: left;
}

.list_top_right p{ width: 160rpx;
font-size: 20rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 32rpx; text-align: center;
height: 32rpx;
background: rgba(0,0,0,0.3); position: absolute; left: 0; bottom: 0;
border-radius: 0rpx 0rpx 8rpx 8rpx;display: block; float: left;
}


	
.list{width: 686rpx;
height: 300rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1; position: relative;
border: 1rpx solid rgba(190,190,190,0.5); margin: 32rpx 32rpx 0;}
	.list_no{ width: 100%; height: 100rpx; line-height: 200rpx; font-size: 30rpx; color: #bababa; text-align: center;}
	.bt_box{ width: 100%;height: 156rpx;
background: #FFFFFF;
box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(255,131,14,0.2);
opacity: 1; position: fixed; left: 0; bottom: 0;
}
	.bt {
		width: 686rpx;
		height: 100rpx;
		background: #FE5700;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 800;	
		color: #FFFFFF;
		display: block;
		float: left;
		margin: 12rpx 32rpx;
	}
	.bt_box_hr{
		width: 100%;height: 200rpx; display: block; float: left;
	}

	page {
		background-color: #fff;
	}
</style>